<script lang="ts" setup>
import type { Ref } from 'vue'
import type { ComponentOptions, componentType } from '../componentPanel/index'
import { ElTable, ElTableColumn } from 'element-plus'
import { inject } from 'vue'

const activeTab = ref('static')
const cmptSize = ref<any>('small')
const selectComponent = inject('selectComponent') as Ref<ComponentOptions>
function handleAddOption() {
  selectComponent.value?.selectOptions?.push({
    value: '',
    label: '',
  })
}
function handleDeleteOption(row: any) {
  selectComponent.value?.selectOptions?.splice(row, 1)
}
</script>

<template>
  <ElTabs v-model="activeTab" class=" w-full" type="border-card" size="small" stretch>
    <ElTabPane label="静态数据" name="static" disabled>
      <ElTable :data="selectComponent?.selectOptions || []" :size="cmptSize">
        <ElTableColumn label="val" width="60">
          <template #default="{ row }">
            <ElInput v-model="row.value" placeholder="请输入选项值" :size="cmptSize" />
          </template>
        </ElTableColumn>
        <ElTableColumn label="label" prop="label" min-width="80">
          <template #default="{ row }">
            <ElInput v-model="row.label" placeholder="请输入选项标签" :size="cmptSize" />
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" prop="selected" width="60">
          <template #default="{ row }">
            <ElButton type="danger" :size="cmptSize" @click="handleDeleteOption(row)">
              <ElIcon>
                <Delete />
              </ElIcon>
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </ElTabPane>
    <ElTabPane label="动态数据" name="dynamic" disabled>
      <div>TODO</div>
    </ElTabPane>
    <ElTabPane label="字典库" name="dict" disabled>
      <div>TODO</div>
    </ElTabPane>
  </ElTabs>
  <div class=" w-full flex justify-end">
    <ElButton type="primary" plain :size="cmptSize" class=" mt-[10px] w-full" @click="handleAddOption">
      添加选项
    </ElButton>
  </div>
</template>

<style scoped>
.delete-icon {
  cursor: pointer;
  color: var(--el-color-danger);
}
:deep(.el-tabs__content) {
  padding: 5px !important;
}
</style>
